<template>
  <div>
    <van-nav-bar fixed left-arrow placeholder title="申请职位" @click-left="onClickLeft" />
    <ze-scroll :exclude-tabbar="true" @scrolltolower="handleScrolltolower">
      <div>
        <div class="tabs">
          <div
            v-for="(item, index) in deps" :key="item.value" class="tab" :class="{active: item.value == current}"
            @click="handleClickTap(item.value, index)"
          >
            {{ item.label }}
          </div>
        </div>
        <!-- 资讯列表 -->
        <div v-if="loading" class="loading">
          <van-loading vertical>
            加载中...
          </van-loading>
        </div>
        <template v-else>
          <div v-if="newsList.length" class="tab-list">
            <job-item v-for="item in newsList" :key="item.id" :news-data="item" />
            <uni-load-more :status="status" />
          </div>
          <van-empty v-else description="暂无数据" />
        </template>
      </div>
    </ze-scroll>
  </div>
</template>

<script>
import JobItem from './job/index.vue'
import {
  DICT_TYPE,
  getDictDatas,
} from '@/utils/dict'
import {
  sleep,
} from '@/utils/common'
import ZeScroll from '@/components/ze-scroll/index.vue'

export default {
  components: {
    JobItem,
    ZeScroll,
  },
  data() {
    return {
      current: 0,
      loading: false,
      newsList: [],
      status: 'more',
      pageNo: 1,
      finished: false,
      deps: getDictDatas(DICT_TYPE.RECRUIT_DEPT),
    }
  },
  onLoad(option) {
    this.current = Number(option.name)
  },
  mounted() {
    this.handleClickTap(this.current)
  },
  methods: {
    // 返回上一级
    onClickLeft() {
      uni.navigateBack()
    },
    handleClickTap(idx) {
      // console.log(idx, 'idx')
      this.pageNo = 1
      this.current = idx
      this.finished = false
      this.loadNews()
    },
    async loadNews() {
      try {
        if (this.pageNo === 1) {
          this.loading = true
        } else {
          this.status = 'loading'
        }
        await sleep(1000)
        const arr = []
        for (let i = 0; i < 10; i++) {
          arr.push({
            id: Math.random() + i,
            title: '中高级前端开发工程师',
            salary: '9-14K',
            ask: ['大专', '1-3年', 'Web端', '移动端'],
            welfare: ['五险一金', '周末双休', '节日福利'],
          })
        }
        if (this.pageNo === 1) {
          this.newsList = arr
        } else {
          this.newsList = [...this.newsList, ...arr]
        }
        if (this.newsList.length > 20) {
          this.finished = true
          this.status = 'noMore'
        }
      } catch (e) {} finally {
        this.loading = false
      }
    },
    loadMore() {
      if (this.finished) {
        return
      }
      this.pageNo++
      this.loadNews()
    },
    handleScrolltolower() {
      this.loadMore()
    },
  },
}
</script>

<style lang="scss" scoped>
	.tabs {
		display: flex;
		align-items: center;
		column-gap: 20px;
		white-space: nowrap;
		overflow-x: auto;
		padding: 15px 10px 0px 10px;
		box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.06);

		.tab {
			font-size: 16px;
			font-weight: 400;
			color: #000000;
			line-height: 16px;
			margin-bottom: 17px;
			position: relative;
			transition: all 250ms;

			&::after {
				content: '';
				display: block;
				position: absolute;
				width: 0px;
				height: 2px;
				left: 50%;
				bottom: -7px;
				transform: translateX(-50%);
				background: #739ECA;
				border-radius: 1px;
				transition: all 250ms;
			}

			&.active {
				font-weight: 500;

				&::after {
					width: 16px;
				}
			}
		}
	}

	.tabs::-webkit-scrollbar {
		display: none;
	}

	.tab-list {
		margin-top: 10px;

		job-item {
			display: flex;
			justify-content: center;
		}
	}

	.loading {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 30px;
	}
</style>
